<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4-transition</title>
    <script src="./js/d3.min.js"></script>
</head>

<body>

</body>
<script>
    /**
     * transition（）方法可用于所有选择器，并启动转换过程。 此方法支持大多数选择方法，
     * 如-attr（），style（）等。但是，它不支持append（）和data（）方法，这些方法需要在transition（）方法之前调用。 
     * 此外，它提供了特定于转换的方法，如duration（），ease（）等
     * duration()       允许属性更改在指定的持续时间内平滑发生，而不是瞬间发生。（单位：毫秒）
     * delay()          方法允许在一段时间之后进行转换。（单位：毫秒）
     * */

    // d3.select("body")
    //     .transition()
    //     .style("background-color", "lightblue");

    // var t = d3.transition()
    //     .delay(2000)
    //     .duration(2000);
    // d3.select("body")
    //     .transition(t)
    //     .style("background-color", "red");

    // d3.select("body")
    //     .transition()
    //     .delay(200)
    //     .each("start", function () {
    //         console.log(this)
    //         d3.select(this).style("color", "green");
    //     })
    //     .style("color", "red");
</script>

</html>